<template>
    <div>
        这是table组件
        <el-button @click="getReq">get请求</el-button>
        <el-button @click="getDelete">delete请求</el-button>
        <el-button @click="getPost">post请求</el-button>
        <el-button @click="getPut">put请求</el-button>

        <el-form ref="form" :model="formData" label-width="100px">
            <!-- 每个表单控件 -->
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="存款" prop="money">
                <el-input v-model="formData.money"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="formData.phone"></el-input>
            </el-form-item>
        </el-form>

        {{formData}}

        <el-button @click="resetForm" type="info">重置表单</el-button>
        <el-button @click="addData" type="primary">新增数据</el-button>
        <el-table :data="tableData">
            <el-table-column label="id" prop="id"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="年龄" prop="age"></el-table-column>
            <el-table-column label="存款" prop="money"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateRow(scope.row)" type="text">更新</el-button>
                    <el-button @click="deleteRow(scope.row)" type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
// 在table.vue组件中实现el-table表格，表格固定列有两个按钮,删除和更新
// 调用get请求拿到表格数据,渲染到el-table中去

import axios from 'axios'

    export default {
        data () {
            return {
                tableData: [],
                formData: {
                    name: '',
                    age: '',
                    money: '',
                    phone: ''
                }
            }
        },
        created () {},
        mounted () {
            this.getTableData()
        },

        // 使用el-form集成修改功能
        // 调用put方法进行单行数据修改
        // 点击更新，更新的接口传参需要替换为表单的内容

        methods: {
            // 获取表格数据
            getTableData () {
                axios.get('http://127.0.0.1:3000/api/test/list').then(res => {
                    console.log(res)
                    this.tableData = res.data
                })
            },

            // 调用删除接口，重新获取表格数据
            // http://127.0.0.1:3000/api/test/delete
            // 参数 {id: 12312312312}
            // 重新调用获取表格数据接口，刷新表格
            deleteRow (row) {
                this.$confirm('确定删除该条数据吗?').then(() => {
                    axios.delete('http://127.0.0.1:3000/api/test/delete', {
                        params: {id: row.id}
                    }).then(res => {
                        console.log(res)
                        this.getTableData()
                    })
                })
            },

            // 调用新增数据接口
            // http://127.0.0.1:3000/api/test/add
            // { name | age | phone | money }
            // getTableData 重新调用，刷新表格数据

            // this.formData ---> {name: '123', age: '123'}
            // 把对象中的属性在同层级展开
            // {...this.formData} ---> {name: '123', age: '123'}
            resetForm () {
                // 第一步：在el-form上面声明ref属性
                // 第二步：在el-form-item上面声明prop属性
                // 第三步：调用resetFields()方法

                // 将formData的对象值重置为初始化值
                this.$refs.form.resetFields()
            },
            addData () {
                axios.post('http://127.0.0.1:3000/api/test/add',
                {...this.formData}).then(res => {
                    this.getTableData()
                    this.resetForm()
                })
            },

            // 调用修改接口
            // http://127.0.0.1:3000/api/test/update
            // {id: 必传参数, name: '新值', age: '新值'}
            // 刷新表格数据
            updateRow (row) {
                axios.put('http://127.0.0.1:3000/api/test/update', {
                    id: row.id,
                    ...this.formData
                }).then(res => {
                    this.getTableData()
                })
            },
            // 传参方式不同
            // get 
            getReq () {
                axios.get('http://127.0.0.1:3000/api/test/list', {
                    params: {name: '这是名称', age: '这是年龄'}
                }).then(res => {
                    console.log(res)
                })
            },
            // delete
            getDelete () {
                axios.delete('http://127.0.0.1:3000/api/test/delete/testDelete', {
                    params: {
                        id: '这是id',
                        msg: '这是msg'
                    }
                }).then(res => {
                    console.log(res)
                })
            },
            // post
            getPost () {
                axios.post('http://127.0.0.1:3000/api/test/add/testPost', {
                    post1: '这是第一参数',
                    post2: '这是第二参数'
                }).then(res => {
                    console.log(res)
                })
            },
            // put
            getPut () {
                axios.put('http://127.0.0.1:3000/api/test/update/testUpdate', {
                    post1: '这是put第一参数',
                    post2: '这是put第二参数'
                }).then(res => {
                    console.log(res)
                })
            }
        }
    }
</script>